<!--  -->
<template>
  <div class="userStyle">
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="菜单名">
          <el-input
            v-model="formInline.permissionName"
            placeholder="请输入菜单名"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
          <el-button type="info" plain @click="clear">重置</el-button>
          <el-button type="primary" v-permission="['tabs:add']" @click="add()"
            >新增</el-button
          >
          <el-button type="primary" v-permission="['tabs:edit']" @click="add()"
            >编辑</el-button
          >
          <!-- <el-button type="success" plain @click="add(1)">新增父级目录</el-button>
          <el-button type="success" plain @click="add(2)">新增子级菜单</el-button>
          <el-button type="success" plain @click="add(3)">新增子级按钮</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="permissionId"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="permissionName" label="菜单名称" />
        <el-table-column label="图标">
          <template slot-scope="scope">
            <div>
              <i :class="scope.row.icon" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="菜单标识" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="btnList">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- *************对话框开始************* -->
    <el-dialog
      :title="userState ? '新增菜单' : '修改菜单'"
      :visible.sync="addFormDialog"
      width="30%"
      center
      :close-on-click-modal="false"
    >
      <!-- 新增角色 -->
      <div>
        <el-form
          ref="ruleForm"
          :model="addForm"
          label-width="80px"
          :rules="userRules"
        >
          <el-form-item label="父节点ID">
            <el-input
              v-model="addForm.permissionPid"
              :disabled="true"
              placeholder="请输入角色名称"
            />
          </el-form-item>
          <el-form-item label="菜单名称" prop="permissionName">
            <el-input
              v-model="addForm.permissionName"
              placeholder="请输入菜单名称"
            />
          </el-form-item>
          <el-form-item label="菜单路径" prop="permission">
            <el-input
              v-model="addForm.permission"
              placeholder="请输入菜单路径"
            />
          </el-form-item>
          <el-form-item label="组件路径" prop="permission">
            <el-input
              v-model="addForm.component"
              placeholder="请输入菜单路径"
            />
          </el-form-item>
          <el-form-item label="图标地址" prop="icon">
            <el-input
              v-model="addForm.icon"
              :prefix-icon="addForm.icon"
              placeholder="请输入图片地址"
              @focus="getFocus"
            />
          </el-form-item>
          <el-form-item label="菜单描述">
            <el-input v-model="addForm.remark" placeholder="请输入菜单描述" />
          </el-form-item>
          <el-form-item label="排序值" prop="sort">
            <el-input
              v-model="addForm.sort"
              type="number"
              placeholder="请输入排序值"
            />
          </el-form-item>
          <el-form-item label="权限类型" prop="resourceType">
            <el-select
              v-model="addForm.resourceType"
              placeholder="请选择活动区域"
            >
              <el-option label="菜单" value="menu" />
              <el-option label="按钮" value="button" />
              <el-option label="目录" value="catalog" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="addForm_enter('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- <Icons
      :dialog-visible="iconVisible"
      @choose="chooseIcon"
      @close="iconVisible = false"
    /> -->

    <el-dialog
      append-to-body
      :close-on-click-modal="true"
      :before-close="beforeClose"
      :visible.sync="addDialog"
      width="580px"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        size="small"
        label-width="80px"
      >
        <el-form-item label="菜单类型" prop="resourceType">
          <el-radio-group
            v-model="form.resourceType"
            size="mini"
            style="width: 178px"
            @change="resourceTypeChange"
          >
            <el-radio-button label="catalog">目录</el-radio-button>
            <el-radio-button label="menu">菜单</el-radio-button>
            <el-radio-button label="button">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="图标地址"
          prop="icon"
          v-if="form.resourceType != 'button'"
        >
          <el-input
            :disabled="form.resourceType == 'button'"
            v-model="form.icon"
            :prefix-icon="form.icon"
            placeholder="请输入图片地址"
            @focus="getFocus"
          />
        </el-form-item>
        <el-form-item
          label="外链菜单"
          prop="isOutLink"
          v-if="form.resourceType != 'button'"
        >
          <el-radio-group v-model="form.isOutLink" size="mini">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="菜单可见"
          prop="isShow"
          v-if="form.resourceType != 'button'"
        >
          <el-radio-group v-model="form.isShow" size="mini">
            <el-radio-button label="0">否</el-radio-button>
            <el-radio-button label="1">是</el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="菜单名称"
          prop="permissionName"
          v-if="form.resourceType != 'button'"
        >
          <el-input
            v-model="form.permissionName"
            :disabled="form.resourceType == 'button'"
            placeholder="请输入菜单名称"
          />
        </el-form-item>
        <el-form-item
          label="菜单路径"
          prop="permissionUri"
          v-if="form.resourceType != 'button'"
        >
          <el-input
            v-model="form.permissionUri"
            :disabled="form.resourceType == 'button'"
            placeholder="请输入菜单路径"
          />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-if="form.resourceType != 'button'"
        >
          <el-input
            v-model="form.component"
            :disabled="form.resourceType == 'button'"
            placeholder="请输入组件路径"
          />
        </el-form-item>

        <el-form-item label="权限标识" prop="permission">
          <el-input
            v-model="form.permission"
            :disabled="form.isOutLink"
            placeholder="请输入权限标识"
          />
        </el-form-item>

        <el-form-item label="菜单排序" prop="sort">
          <el-input-number
            v-model.number="form.sort"
            :min="0"
            :max="999"
            controls-position="right"
            style="width: 178px"
          />
        </el-form-item>

        <el-form-item label="上级类目" prop="permissionPid">
          <treeselect
            v-model="form.permissionPid"
            :options="menus"
            :normalizer="normalizer"
            style="width: 450px"
            placeholder="选择上级类目"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="addDialog = false">取消</el-button>
        <el-button type="primary" @click="addForm_enter('ruleForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import IconSelect from "@/components/IconSelect";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  tabsGetAll,
  tabsAdd,
  tabsGetById,
  tabsUpdate,
  tabsDelete,
  getMaxSort,
} from "@/api/setup";
import Icons from "./Icons";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    IconSelect,
    Treeselect,
    Icons,
  },
  data() {
    // 这里存放数据
    return {
      rules: {
        permissionPid: [
          { required: true, message: "请选择上级类目", trigger: "blur" },
        ],
        permission: [
          { required: true, message: "请输入权限标识", trigger: "blur" },
        ],
        component: [
          { required: true, message: "请输入组件路径", trigger: "blur" },
        ],
        permissionUri: [
          { required: true, message: "请输入菜单路径", trigger: "blur" },
        ],
        icon: [{ required: true, message: "请选择图标", trigger: "blur" }],
        permissionName: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        component: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
      normalizer(node) {
        return {
          id: node.permissionId,
          label: node.permissionName,
          children: node.childs,
        };
      },
      form: {
        isOutLink: false,
        permissionPid: 0, // 父节点id
        permissionName: "", // 权限名称
        permissionUri: "", // URI
        permission: "", // 组件
        icon: "", // 图标地址
        remark: "", // 描述
        resourceType: "catalog", // 权限类型 menu-菜单 button-按钮 catalog-目录
        sort: null, // 排序值
      },
      menus: [],
      addDialog: false,
      formInline: {
        permissionName: "", // 搜索字段
        // page: '1', // 当前页
        // pageSize: '10' // 每页记录数
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      userState: 1,
      addForm: {
        permissionPid: "", // 父节点id
        permissionName: "", // 权限名称
        permissionUri: "", // URI
        permission: "", // 组件
        icon: "", // 图标地址
        remark: "", // 描述
        resourceType: "menu", // 权限类型 menu-菜单 button-按钮 catalog-目录
        sort: "", // 排序值
        compoents: "",
      },
      addFormDialog: false,
      userRules: {
        permissionName: [
          { required: true, message: "请输入权限名称", trigger: "blur" },
        ],
        permission: [
          { required: true, message: "请输入菜单路径", trigger: "blur" },
        ],
        resourceType: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        sort: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
        icon: [{ required: true, message: "请输入图标地址", trigger: "blur" }],
      },
      iconVisible: false,
      multipleSelection: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAll(this.formInline);
  },
  // 方法集合
  methods: {
    resourceTypeChange(e) {
      if (e == "button") {
        this.form.isShow = 0;
      } else {
        this.form.isShow = 1;
      }
    },
    // 选中图标
    selected(name) {
      this.form.icon = name;
    },
    beforeClose() {
      this.addDialog = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getAll(this.formInline);
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getAll(this.formInline);
    },
    removeTag(index) {
      //console.log(index)
    },
    tagChange(index) {
      this.$forceUpdate();
      //console.log(index)
    },
    // 查询
    search() {
      this.total = 1;
      this.formInline.page = 1;
      this.getAll(this.formInline);
    },
    // 清除
    clear() {
      this.formInline = {
        permissionName: "", // 搜索字段
        // page: '1', // 当前页
        // pageSize: '10' // 每页记录数
      };
      this.getAll(this.formInline);
    },
    add() {
      this.userState = true;
      this.addDialog = true;
      this.form = {
        isOutLink: 0,
        isShow: 1,
        permissionPid: 0, // 父节点id
        permissionName: "", // 权限名称
        permissionUri: "", // URI
        permission: "", // 组件
        icon: "", // 图标地址
        remark: "", // 描述
        resourceType: "catalog", // 权限类型 menu-菜单 button-按钮 catalog-目录
        sort: null, // 排序值
      };
    },
    // 确认新增角色
    addForm_enter(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.userState) {
            tabsAdd(this.form).then((res) => {
              if (res.code === "") {
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
              this.getAll(this.formInline);
              this.addDialog = false;
            });
          } else {
            tabsUpdate(this.form).then((res) => {
              if (res.code === "") {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
              this.getAll(this.formInline);
              this.addDialog = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    // 编辑角色
    edit(row) {
      this.userState = false;
      this.addDialog = true;
      tabsGetById({ permissionId: row.permissionId }).then((res) => {
        this.form = res.data;
      });
    },
    // 删除角色
    async del(row) {
      const res = await tabsDelete({ permissionId: row.permissionId });
      if (res.code === "") {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
      this.getAll(this.formInline);
    },
    // 组件传回值
    chooseIcon(icon) {
      this.form.icon = icon;
      this.iconVisible = false;
    },
    getFocus() {
      this.iconVisible = true;
    },
    // 初始化查询所有数据
    async getAll(formInline) {
      const res = await tabsGetAll(formInline);
      const data = res.data;
      data.forEach((item) => {
        if (item.childs.length) {
          item.childs.forEach((items) => {
            if (items.childs.length) {
              items.childs.forEach((itemss) => {
                itemss.isDisabled = true;
                if (!itemss.childs.length) delete itemss.childs;
              });
            } else {
              delete items.childs;
            }
          });
        } else {
          delete item.childs;
        }
      });
      this.menus = [];
      let menu = { permissionId: 0, permissionName: "顶级类目", childs: [] };
      menu.childs = data;
      this.menus.push(menu);
      this.tableData = res.data;
      // this.total = res.data.total
    },
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.userStyle {
  padding: 20px;
}
</style>
